<template>
      
    <Modal title="设置" v-model="isShow" @on-cancel='close' :mask-closable="false" @on-visible-change='change'
           class-name="vertical-center-modal" width='900'>
        <Alert v-if="!isDisabled" class="hint"></Alert>
        <Alert type="warning" v-if="isDisabled" show-icon>{{hint}}</Alert>
        <div slot="footer">
            <Button type="text" @click='close'>取消</Button>
            <Button type="info" :disabled="isDisabled||isDisabled2" @click="handleSubmit('formInline')">确定</Button>
        </div>
        <Row>
            <Col span="12">
                <i-form label-position="left" :label-width="100" ref="formInline" :model="formInline"
                        :rules="ruleInline">
                    <Form-item label="名称" prop="name">
                        <i-input v-model="formInline.name"></i-input>
                    </Form-item>
                    <Form-item label="时间类型">
                        <i-select v-model="formInline.timeType" size="large" style="width:100px">
                            <i-option v-for="(item,index) in type" :key="index" :value="item.value">{{item.label}}
                            </i-option>
                        </i-select>
                    </Form-item>
                    <Form-item label="时间范围">
                        <DatePicker type="daterange" format="yyyy-MM-dd" @change="changeDate" :options="dateOptions"
                                    v-model:value="dateValue"
                                    placement="bottom-start" placeholder="选择日期" class="mg_right mg_top"
                                    style="width: 200px;"></DatePicker>
                    </Form-item>
                    <Form-item label="聚合时间单位">
                        <Select :disabled="isFunnelType" v-model="unit" placeholder="单位" style="width:100px">
                            <Option v-for="item in timeUnits" :value="item.value" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                    </Form-item>
                    <Form-item label="显示指标" :prop="isProp">
                        <i-select :disabled="isFunnelType" :max-tag-count="1" :multiple="isMultiple"
                                  v-model="formInline.pitchIndicators" size="large">
                            <i-option v-for="(item,index) in orderIndicators" :key="index" :value="item.value">{{
                                item.label}}
                            </i-option>
                        </i-select>
                    </Form-item>
                    <Form-item label="显示分组">
                        <i-select :disabled="isFunnelType" v-model="formInline.dimension" placeholder="显示分组" multiple
                                  style="width:200px">
                            <i-option v-for="item in groups" :value="item.value" :key="item.value">{{ item.label }}
                            </i-option>
                        </i-select>
                    </Form-item>
                    <Form-item label="备注">
                        <i-input v-model="formInline.remarkA" type="textarea"
                                 :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></i-input>
                    </Form-item>
                </i-form>
            </Col>
            <Col span="12">
                <Row>
                    <Col span="24">
                        <div class="type">
                            <span>图表类型</span>
                            <div class="charts">
                                <div class="chart" v-for="(item,index) in charts" :key="index"
                                     :class="{active:activeChars == item.tu||formInline.chartType==item.chartType}"
                                     @click="chartClick(item)">
                                    <i :class='"iconfont icon-"+item.icon'></i>
                                    <span>{{item.tu}}</span>
                                </div>
                            </div>
                        </div>
                    </Col>
                    <Col span="24">
                        <div class="type">
                            <span>窗口类型</span>
                            <div class="windows">
                                <div class="window" v-for="(item,index) in imgs" :key="index"
                                     :class="{active:activeImg == item.name||formInline.size==item.size}"
                                     @click="windowClick(item)">
                                    <img :src='"../../../static/img/"+item.img' alt="">
                                    <span>{{item.name}}</span>
                                </div>
                            </div>
                        </div>
                    </Col>
                </Row>
            </Col>
        </Row>
    </Modal>
</template>

<script>
    import {mapState} from 'vuex'
    import EventConfigUtil from '../utils/EventConfigUtil'

    export default {
        data() {
            return {
                isProp: "pitchIndicators",
                hint: '请选择图表类型和窗口类型',
                isDisabled: false,
                isDisabled2: true,
                ruleInline: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'}
                    ],
                    pitchIndicators: [],
                },
                formInline: {
                    name: '', //区块名称
                    timeType: 'absolute',//时间类型动静态时间类型
                    remarkA: '',//备注
                    chartType: '',//图表类型
                    size: '',//窗口大小
                    pitchIndicators: [],
                    dimension: [],//选中的显示分组集合
                },
                activeChars: '',//图表类型的高亮条件变量
                activeImg: '',//窗口类型的高亮条件变量
                unit: 'none',
                dateValueArry: [],//选中的时间集合
                TimeConfigJSON: '',//时间配置JSON串
                BaseType: '',
                indicators: [],
                groups: [],
                resultSet: [],
                time: {
                    start: this.$sessionStore.getDay(-7),
                    end: this.$sessionStore.getDay(0),
                    unit: 'none',
                },
                dateValue: [this.$sessionStore.getDay(-7), this.$sessionStore.getDay(0)],
                endTime: new Date(this.$sessionStore.getDay(1)),
                dateOptions: {
                    disabledDate: (function (date) {
                        return date && date && date.valueOf() > this.endTime - 86400000;
                    }).bind(this),
                    shortcuts: [
                        {
                            text: '今天',
                            value() {
                                const end = new Date();
                                const start = new Date();
                                return [start, end];
                            }
                        },
                        {
                            text: '昨天',
                            value() {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近7天',
                            value() {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近一月',
                            value() {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近三月',
                            value() {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                return [start, end];
                            }
                        }
                    ]
                },
                type: [
                    {
                        value: 'relative',
                        label: '动态时间'
                    },
                    {
                        value: 'absolute',
                        label: '静态时间'
                    }
                ],

                //窗口类型的渲染数据
                imgs: [
                    {
                        img: 'mini.svg',
                        name: '小',
                        size: "small"
                    },
                    {
                        img: 'normal.svg',
                        name: '中',
                        size: "normal"
                    },
                    {
                        img: 'large.svg',
                        name: '大',
                        size: "big"
                    }
                ],
                // 图表类型的渲染数据
                charts: [
                    {
                        icon: 'monishuju',
                        tu: '线图',
                        chartType: 'line'
                    },
                    {
                        icon: 'tubiaozhuzhuangtu',
                        tu: '柱图',
                        chartType: 'bar'
                    },
                    {
                        icon: 'biaoge',
                        tu: '表格',
                        chartType: 'table'
                    },
                    {
                        icon: 'shuzhi',
                        tu: '数值',
                        chartType: 'number'
                    },
                    {
                        icon: 'loudoushaixuan',
                        tu: '漏斗',
                        chartType: 'funnel'
                    }
                ],
                timeUnits: [ //聚合时间单位分组
                    {
                        label: '无时间分组',
                        value: 'none'
                    },
                    {
                        label: '按天',
                        value: 'day'
                    },
                    {
                        label: '按周',
                        value: 'week'
                    },
                    {
                        label: '按月',
                        value: 'month'
                    }
                ],
                indexData: this.$ConfigOption.DATEOPTION(), //定义日期组建配置
                projectId: this.$store.state.projectId,
                config: {
                    indicators: [{
                        event: "",
                        measure: [],
                        filter: {
                            condition: 'AND',
                            rules: []
                        }
                    }],
                    dimensions: [],
                    filter: {
                        condition: 'AND',
                        rules: []
                    },
                    display: {
                        orderby: '',
                        order: 'DESC',
                        limit: 1
                    }
                },
                JSON: '',
                block: null,
                adIndexdata: null,
                isMultiple: true,
            }
        },
        name: "setModule",
        props: {
            modal: Boolean,
            events: Array,
            measures: Array,
            dashboardId: Array,
            CurrentconfigBase: Number,
            chartconfig: Array,
            blockIndex: Number,
            requestConfig: Object,
            addorset: String,
            properties: Array,
            eventModal: Boolean,
            funnelModal: Boolean,
            adModal: Boolean,
        },
        computed: {
            eventMap: function () {

                let eventMap = {};
                for (let i = 0; i < this.events.length; i++) {
                    eventMap[this.events[i].name] = this.events[i];
                }
                return eventMap;
            },
            measureMap: function () {
                let measureMap = {};
                for (let i = 0; i < this.measures.length; i++) {
                    measureMap[this.measures[i].name] = this.measures[i];
                }
                return measureMap;
            },
            adMeasureMap: function () {
                let adMeasureMap = {};
                for (let i = 0; i < this.adMeasures.length; i++) {
                    adMeasureMap[this.adMeasures[i].name] = this.adMeasures[i];
                }
                return adMeasureMap;
            },
            adIndexMap: function () {
                let adIndexMap = {};
                for (let i = 0; i < this.adIndexdata.length; i++) {
                    adIndexMap[this.adIndexdata[i].name] = this.adIndexdata[i];
                }
                return adIndexMap;
            },
            orderIndicators: function () {
                let orderIndicators = [];
                let obj = {};
                for (let i = 0; i < this.indicators.length; i++) {
                    if (this.indicators[i].measure === undefined) {
                        continue;
                    }
                    for (let j = 0; j < this.indicators[i].measure.length; j++) {
                        let eventName = this.indicators[i].event;
                        let measureName = this.indicators[i].measure[j].name;
                        if (this.indicators[i].event === '') {
                            if (!obj[measureName]) {
                                if (measureName in this.adIndexMap) {
                                    orderIndicators.push({
                                        label: this.adIndexMap[measureName].displayName,
                                        value: measureName
                                    });
                                    obj[measureName] = true;
                                }
                            }
                        } else {
                            if (!obj[eventName + "_" + measureName]) {
                                if (eventName in this.eventMap && measureName in this.measureMap) {
                                    orderIndicators.push({
                                        label: this.eventMap[eventName].displayName + "的" + this.measureMap[measureName].displayName,
                                        value: eventName + "_" + measureName
                                    });
                                    obj[eventName + "_" + measureName] = true;
                                }
                            }
                        }
                    }
                }
                return orderIndicators;
            },
            isShow: {
                get: function () {
                    if (this.$route.query.id == 1) {
                        return this.eventModal
                    } else if (this.$route.query.id == 2) {
                        return this.funnelModal
                    } else if (this.$route.query.id == 3) {
                        return this.adModal
                    } else {
                        return this.modal
                    }
                },
                set: function (value) {
                }
            },
            isFunnelType: {
                get: function () {
                    if (this.$route.query.id == 2) {
                        this.isProp = ""
                        return true
                    } else if (this.CurrentconfigBase == 2) {
                        this.isProp = ""
                        return true
                    } else {
                        this.isProp = "pitchIndicators"
                        return false
                    }
                },
                set: function (value) {
                }
            },

        },
        mounted() {

            this.loadadad()
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    console.log("before valid:"+valid);
                    if (valid) {
                        this.onOk()
                    } else {
                        this.$Message.error('验证失败!');
                    }
                })
            },
            change() {
                if (this.$route.query.id == 1) {
                    this.indicators = this.requestConfig.indicators
                    this.config = this.requestConfig
                    this.query(this.requestConfig)
                    return
                } else if (this.$route.query.id == 2) {
                    let _that = this
                    if (_that.addorset == 'set') {
                        _that.isDisabled2 = false
                        _that.formInline.chartType = "funnel"
                        _that.formInline.size = "normal"
                        let JSONchartconfig = JSON.stringify(_that.chartconfig)
                        _that.block = JSON.parse(JSONchartconfig)[_that.blockIndex]
                        _that.block.config = JSON.parse(_that.block.config)
                        _that.block.time = JSON.parse(_that.block.time)
                        if (_that.block.time.type == 'absolute') {
                            _that.block.time.values[0] = _that.$sessionStore.getDay(-_that.block.time.values[0])
                            _that.block.time.values[1] = _that.$sessionStore.getDay(-_that.block.time.values[1])
                            _that.dateValue = _that.block.time.values.splice(0, 2)
                        } else if (_that.block.time.type == 'relative') {
                            _that.dateValue = _that.block.time.values
                        }
                        _that.unit = _that.block.time.unit
                        _that.config = _that.block.config
                        _that.formInline.name = _that.block.name
                        _that.formInline.remarkA = _that.block.remark
                        _that.formInline.timeType = _that.block.time.type

                    } else if (_that.addorset == 'add') {
                        _that.isDisabled2 = false
                        _that.formInline.name = ''
                        _that.formInline.remarkA = ''
                        _that.activeChars = ''
                        _that.activeImg = ''
                        _that.formInline.chartType = 'funnel'
                        _that.formInline.size = 'normal'
                    }
                    return
                } else if (this.$route.query.id == 3) {
                    this.indicators = this.requestConfig.indicators
                    this.config = this.requestConfig
                    this.query(this.requestConfig)
                    return
                } else if (this.CurrentconfigBase == 2) {
                    _that.formInline.chartType = 'funnel'
                    _that.formInline.size = 'normal'
                    _that.isDisabled2 = false
                }
                let _that = this
                if (_that.addorset == 'set') {
                    this.isDisabled = false
                    this.isDisabled2 = false
                    let JSONchartconfig = JSON.stringify(_that.chartconfig)
                    _that.indicators = JSON.parse(JSON.parse(JSONchartconfig)[_that.blockIndex].config).indicators
                    _that.block = JSON.parse(JSONchartconfig)[_that.blockIndex]
                    _that.block.config = JSON.parse(_that.block.config)
                    _that.block.time = JSON.parse(_that.block.time)
                    if (_that.block.time.type == 'absolute') {
                        _that.block.time.values[0] = _that.$sessionStore.getDay(-_that.block.time.values[0])
                        _that.block.time.values[1] = _that.$sessionStore.getDay(-_that.block.time.values[1])
                        _that.dateValue = _that.block.time.values.splice(0, 2)
                    } else if (_that.block.time.type == 'relative') {
                        _that.dateValue = _that.block.time.values
                    }
                    _that.unit = _that.block.time.unit
                    _that.config = _that.block.config
                    _that.formInline.name = _that.block.name
                    _that.formInline.remarkA = _that.block.remark
                    _that.formInline.timeType = _that.block.time.type
                    _that.formInline.chartType = _that.block.chartType
                    _that.formInline.size = _that.block.size
                    _that.formInline.pitchIndicators = _that.block.indicators.split(',')
                    _that.formInline.dimension = _that.block.groups.split(',')
                    _that.query(_that.block.config)
                } else if (_that.addorset == 'add') {
                    _that.empty()
                    _that.indicators = _that.requestConfig.indicators
                    _that.query()
                }
            },
            onOk() {
                let _that = this
                let changeIndicators = null
                let changeDimension = null
                _that.timeConfigJSON()
                // _that.close()
                // console.log("after close");
                if (_that.formInline.pitchIndicators.length > 0 || _that.formInline.dimension.length > 0) {
                    changeIndicators = _that.formInline.pitchIndicators.join(',')
                    changeDimension = _that.formInline.dimension.join(',')
                }
                let paramsObj = {
                    name: _that.formInline.name,
                    remark: _that.formInline.remarkA,
                    chartType: _that.formInline.chartType,
                    size: _that.formInline.size,
                    time: _that.TimeConfigJSON,
                }
                // console.log(_that.formInline.pitchIndicators);
                if (_that.$route.query.id == 2) {
                    paramsObj.config = JSON.stringify(_that.requestConfig)
                } else {
                    paramsObj.config = JSON.stringify(_that.config)
                    paramsObj.indicators = _that.formInline.pitchIndicators.length > 0 ? changeIndicators : _that.formInline.pitchIndicators,
                        paramsObj.groups = _that.formInline.dimension.length > 0 ? changeDimension : _that.formInline.dimension
                }
                console.log("add or set:"+_that.addorset);
                if (_that.addorset == 'set') {
                    paramsObj.type = _that.chartconfig[_that.blockIndex].type
                    let num = _that.blockIndex
                    _that.$axios.put(_that.$api.report + '/dashboard-pro/' + _that.dashboardId[0].id + '/block/' + _that.chartconfig[this.blockIndex].id,
                        _that.qs.stringify(paramsObj),
                        {
                            headers: {
                                "Authorization": "Bearer" + _that.$sessionStore.fetch(),
                                'Content-type': 'application/x-www-form-urlencoded'
                            },
                            params: {
                                projectId: _that.$store.state.projectId
                            }
                        }
                    )
                        .then(function (res) {
                            _that.$Message.info('修改成功');
                            _that.$router.replace('/main')
                            _that.empty()
                            _that.$parent.$parent.$parent.updataboard(num, res.data)
                        }).catch(function (err) {
                        console.log(err);
                    })
                } else if (_that.addorset == 'add' || _that.$route.query.id) {
                    _that.$emit('addmodule', paramsObj)
                    console.log(paramsObj);
                    //_that.empty()
                }
            },
            query: function (config) {
                let isConfig = null
                if (this.addorset == 'set') {
                    isConfig = config
                } else if (this.addorset == 'add' || this.$route.query.id) {
                    isConfig = this.requestConfig
                }
                this.resultSet.splice(0, this.resultSet.length)
                if (this.$route.query.id == 3) {
                    this.getAd(isConfig)
                } else if (this.$route.query.id == 1) {
                    this.getEvent(isConfig)
                } else if (this.chartconfig[this.blockIndex]) {
                    if (this.chartconfig[this.blockIndex].type == 'event') {
                        this.getEvent(isConfig)
                    } else if (this.chartconfig[this.blockIndex].type == "ad") {
                        this.getAd(isConfig)
                    }
                } else if (this.CurrentconfigBase == 0) {
                    this.isProp = "pitchIndicators"
                    this.ruleInline.pitchIndicators[0] = {
                        required: true,
                        message: '请选择显示指标',
                        trigger: 'change',
                        type: 'array'
                    }
                    this.getEvent(isConfig)
                } else if (this.CurrentconfigBase == 1) {
                    this.isProp = "pitchIndicators"
                    this.ruleInline.pitchIndicators[0] = {
                        required: true,
                        message: '请选择显示指标',
                        trigger: 'change',
                        type: 'array'
                    }
                    this.getAd(isConfig)
                }
            },
            loadadad() {
                this.$axios.get(this.$api.report + "/analysis/ad/measure", {
                    headers: {
                        "Authorization": "Bearer " + this.$sessionStore.fetch(),
                        "Accept": "application/json"
                    },
                    params: {
                        projectId: this.$store.state.projectId
                    }
                }).then(response => {
                    if (response.status === 200) {
                        this.adIndexdata = response.data;
                    }
                })
                    .catch(error => {
                        console.log(error);
                    });
            },
            updateGroups: function (config) {
                this.groups.splice(0, this.groups.length);
                let obj = {};
                if (this.$route.query.id == 3 || this.$route.query.id == 1) {
                    if (this.resultSet.length === 0) {
                        this.groups.push({
                            label: "",
                            value: ""
                        })
                    }
                    for (let i = 0; i < this.resultSet.length; i++) {
                        let label = "";
                        for (let j = 0; j < config.dimensions.length; j++) {
                            if (j === config.dimensions.length - 1) {
                                label += this.resultSet[i][config.dimensions[j]];
                            } else {
                                label += this.resultSet[i][config.dimensions[j]] + ",";
                            }
                        }
                        if (!obj[label]) {
                            this.groups.push({
                                label: label,
                                value: label
                            });
                            obj[label] = true;
                        }
                    }
                } else if (this.chartconfig[this.blockIndex]) {
                    if (this.chartconfig[this.blockIndex].type == 'ad' || this.chartconfig[this.blockIndex].type == 'event') {
                        if (this.resultSet.length === 0) {
                            this.groups.push({
                                label: "",
                                value: ""
                            })
                        }
                        for (let i = 0; i < this.resultSet.length; i++) {
                            let label = "";
                            for (let j = 0; j < config.dimensions.length; j++) {
                                if (j === config.dimensions.length - 1) {
                                    label += this.resultSet[i][config.dimensions[j]];
                                } else {
                                    label += this.resultSet[i][config.dimensions[j]] + ",";
                                }
                            }
                            if (!obj[label]) {
                                this.groups.push({
                                    label: label,
                                    value: label
                                });
                                obj[label] = true;
                            }
                        }
                    }
                } else if (this.CurrentconfigBase == 0 || this.CurrentconfigBase == 1) {
                    if (this.resultSet.length === 0) {
                        this.groups.push({
                            label: "",
                            value: ""
                        })
                    }
                    for (let i = 0; i < this.resultSet.length; i++) {
                        let label = "";
                        for (let j = 0; j < config.dimensions.length; j++) {
                            if (j === config.dimensions.length - 1) {
                                label += this.resultSet[i][config.dimensions[j]];
                            } else {
                                label += this.resultSet[i][config.dimensions[j]] + ",";
                            }
                        }
                        if (!obj[label]) {
                            this.groups.push({
                                label: label,
                                value: label
                            });
                            obj[label] = true;
                        }
                    }
                }
            },
            getAd(isConfig) {
                this.$axios.post(this.$api.report + "/analysis/ad",
                    {
                        time: {
                            start: this.$sessionStore.getDay(-90),
                            end: this.$sessionStore.getDay(0),
                            unit: "day"
                        },
                        config: EventConfigUtil.deleteKey(isConfig)
                    },
                    {
                        headers: {
                            "Authorization": "Bearer" + this.$sessionStore.fetch(),
                            "Accept": "application/json"
                        },
                        params: {
                            projectId: this.$store.state.projectId
                        }
                    }).then(response => {
                    if (response.status === 200) {
                        this.resultSet = response.data;
                        this.updateGroups(isConfig)
                    }
                })
                    .catch(error => {
                        console.log(error);
                    }).finally(() => {
                });
            },
            getEvent(isConfig) {
                this.$axios.post(this.$api.report + "/analysis/event",
                    {
                        time: {
                            start: this.$sessionStore.getDay(-90),
                            end: this.$sessionStore.getDay(0),
                            unit: "day"
                        },
                        config: EventConfigUtil.deleteKey(isConfig)
                    },
                    {
                        headers: {
                            "Authorization": "Bearer" + this.$sessionStore.fetch(),
                            "Accept": "application/json"
                        },
                        params: {
                            projectId: this.$store.state.projectId
                        }
                    }).then(response => {
                    if (response.status === 200) {
                        this.resultSet = response.data;
                        this.updateGroups(isConfig)
                    }
                })
                    .catch(error => {
                        console.log(error);
                    }).finally(() => {
                });
            },
            // 时间配置的JSON串
            timeConfigJSON() {
                let TimeConfig = {}
                if (this.formInline.timeType == 'relative') {
                    TimeConfig.type = this.formInline.timeType
                    if (this.dateValueArry.length > 0) {
                        TimeConfig.values = this.dateValueArry
                    } else {
                        TimeConfig.values = [this.$sessionStore.getDay(-7), this.$sessionStore.getDay(0)]
                    }

                    TimeConfig.unit = this.unit
                    this.TimeConfigJSON = JSON.stringify(TimeConfig)
                } else {
                    TimeConfig.type = this.formInline.timeType
                    if (this.dateValueArry.length > 0) {
                        let newdata1 = this.dateDiff(this.dateValueArry[0])
                        let newdata2 = this.dateDiff(this.dateValueArry[1])
                        let dataArry = []
                        dataArry.push(newdata1)
                        dataArry.push(newdata2)
                        dataArry.push('day')
                        TimeConfig.values = dataArry

                    } else {
                        let newdata1 = this.dateDiff(this.$sessionStore.getDay(-7))
                        let newdata2 = this.dateDiff(this.$sessionStore.getDay(0))
                        let dataArry = []
                        dataArry.push(newdata1)
                        dataArry.push(newdata2)
                        dataArry.push('day')
                        TimeConfig.values = dataArry
                    }
                }
                TimeConfig.unit = this.unit
                this.TimeConfigJSON = JSON.stringify(TimeConfig)
            },
            // 转换指定日期至现在的时间差
            dateDiff: function (sDate1) {
                var date2 = new Date();
                var date1 = new Date(Date.parse(sDate1.replace(/-/g, "/")));
                var iDays = parseInt(Math.abs(date2.getTime() - date1.getTime()) / 1000 / 60 / 60 / 24);
                return iDays;
            },
            changeDate: function (dateValue) {
                this.time.start = dateValue[0];
                this.time.end = dateValue[1];
                this.dateValueArry = dateValue
            },
            chartClick(item) {
                this.activeChars = item.tu
                this.formInline.chartType = item.chartType
                this.judgement("窗口类型")
            },
            windowClick(item) {
                this.activeImg = item.name
                this.formInline.size = item.size
                this.judgement("图表类型")
            },
            judgement(genre) {
                this.isDisabled2 = false
                if (this.$route.query.id == 1 || this.$route.query.id == 3) {
                    if (this.formInline.chartType == 'line' || this.formInline.chartType == 'bar' || this.formInline.chartType == 'table') {
                        if (this.formInline.size == 'small') {
                            this.hint = '当前配置不支持小尺寸'
                            this.isDisabled = true
                        } else if (this.formInline.size == "") {
                            this.hint = "需要选择" + genre
                            this.isDisabled = true
                        } else {
                            this.isDisabled = false
                        }
                    } else if (this.formInline.chartType == 'number') {
                        if (this.formInline.size == 'big') {
                            this.hint = '当前配置不支持大尺寸'
                            this.isDisabled = true
                        } else if (this.formInline.size == "") {

                            this.hint = "需要选择" + genre
                            this.isDisabled = true
                        } else {
                            this.isDisabled = false
                        }
                    } else if (this.formInline.chartType == 'funnel') {
                        this.hint = '当前配置不支持漏斗图'
                        this.isDisabled = true
                    } else {
                        this.hint = "需要选择" + genre
                        this.isDisabled = true
                    }
                } else if (this.$route.query.id == 2) {
                    if (this.formInline.chartType == 'line') {
                        this.hint = '当前配置不支持线图'
                        this.isDisabled = true

                    } else if (this.formInline.chartType == 'bar') {
                        this.hint = '当前配置不支持柱图'
                        this.isDisabled = true

                    } else if (this.formInline.chartType == 'table') {
                        this.hint = '当前配置不支持表格'
                        this.isDisabled = true

                    } else if (this.formInline.chartType == 'number') {
                        this.hint = '当前配置不支持数值'
                        this.isDisabled = true
                    } else if (this.formInline.chartType == 'funnel') {
                        if (this.formInline.size == 'small') {
                            this.hint = '当前配置不支持小尺寸'
                            this.isDisabled = true
                        } else if (this.formInline.size == 'big') {
                            this.hint = '当前配置不支持大尺寸'
                            this.isDisabled = true
                        } else {
                            this.isDisabled = false
                        }
                    }
                } else if (this.chartconfig[this.blockIndex]) {
                    if (this.chartconfig[this.blockIndex].type == "event" || this.chartconfig[this.blockIndex].type == "ad") {
                        if (this.formInline.chartType == 'line' || this.formInline.chartType == 'bar' || this.formInline.chartType == 'table') {
                            if (this.formInline.size == 'small') {
                                this.hint = '当前配置不支持小尺寸'
                                this.isDisabled = true
                            } else {
                                this.isDisabled = false
                            }
                        } else if (this.formInline.chartType == 'number') {
                            if (this.formInline.size == 'big') {
                                this.hint = '当前配置不支持大尺寸'
                                this.isDisabled = true
                            } else {
                                this.isDisabled = false
                            }
                        } else if (this.formInline.chartType == 'funnel') {
                            this.hint = '当前配置不支持漏斗图'
                            this.isDisabled = true
                        }
                    } else if (this.chartconfig[this.blockIndex].type == "funnel") {
                        if (this.formInline.chartType == 'line') {
                            this.hint = '当前配置不支持线图'
                            this.isDisabled = true

                        } else if (this.formInline.chartType == 'bar') {
                            this.hint = '当前配置不支持柱图'
                            this.isDisabled = true

                        } else if (this.formInline.chartType == 'table') {
                            this.hint = '当前配置不支持表格'
                            this.isDisabled = true

                        } else if (this.formInline.chartType == 'number') {
                            this.hint = '当前配置不支持数值'
                            this.isDisabled = true

                        } else if (this.formInline.chartType == 'funnel') {
                            if (this.formInline.size == 'small') {
                                this.hint = '当前配置不支持小尺寸'
                                this.isDisabled = true
                            } else if (this.formInline.size == 'big') {
                                this.hint = '当前配置不支持大尺寸'
                                this.isDisabled = true
                            } else {
                                this.isDisabled = false
                            }
                        }
                    }
                } else if (this.CurrentconfigBase == 0 || this.CurrentconfigBase == 1) {
                    if (this.formInline.chartType == 'line' || this.formInline.chartType == 'bar' || this.formInline.chartType == 'table') {
                        if (this.formInline.size == 'small') {
                            this.hint = '当前配置不支持小尺寸'
                            this.isDisabled = true
                        } else if (this.formInline.size == "") {

                            this.hint = "需要选择" + genre
                            this.isDisabled = true
                        } else {
                            this.isDisabled = false
                        }
                    } else if (this.formInline.chartType == 'number') {
                        if (this.formInline.size == 'big') {
                            this.hint = '当前配置不支持大尺寸'
                            this.isDisabled = true
                        } else if (this.formInline.size == "") {

                            this.hint = "需要选择" + genre
                            this.isDisabled = true
                        } else {
                            this.isDisabled = false
                        }
                    } else if (this.formInline.chartType == 'funnel') {
                        this.hint = '当前配置不支持漏斗图'
                        this.isDisabled = true
                    } else {
                        this.hint = "需要选择" + genre
                        this.isDisabled = true
                    }
                } else if (this.CurrentconfigBase == 2) {
                    if (this.formInline.chartType == 'line') {
                        this.hint = '当前配置不支持线图'
                        this.isDisabled = true
                    } else if (this.formInline.chartType == 'bar') {
                        this.hint = '当前配置不支持柱图'
                        this.isDisabled = true
                    } else if (this.formInline.chartType == 'table') {
                        this.hint = '当前配置不支持表格'
                        this.isDisabled = true
                    } else if (this.formInline.chartType == 'number') {
                        this.hint = '当前配置不支持数值'
                        this.isDisabled = true
                    } else if (this.formInline.chartType == 'funnel') {
                        if (this.formInline.size == 'small') {
                            this.hint = '当前配置不支持小尺寸'
                            this.isDisabled = true
                        } else if (this.formInline.size == 'big') {
                            this.hint = '当前配置不支持大尺寸'
                            this.isDisabled = true
                        } else {
                            this.isDisabled = false
                        }
                    }
                }
                //添加自定义报表的检测
            },
            empty() {
                this.formInline.pitchIndicators = []
                this.formInline.dimension = []
                this.formInline.name = ''
                this.formInline.remarkA = ''
                this.activeChars = ''
                this.activeImg = ''
                this.formInline.chartType = ''
                this.formInline.size = ''
                this.isDisabled = false
                this.hint = ""
                this.isProp = ''
            },
            close() {
                if (this.$route.query.id == 1) {
                    this.$parent.updataEventModal()
                } else if (this.$route.query.id == 2) {
                    this.$parent.$parent.updataFunnelModal()
                } else if (this.$route.query.id == 3) {
                    this.$parent.$parent.updataAdModal()
                } else {
                    this.$parent.$parent.$parent.updatamodal2()
                }
                if (this.addorset !== 'set') {
                    //this.empty()
                }

            }
        },
        watch: {
            block: {
                handler(newValue, oldValue) {
                    this.formInline.size = newValue.size
                },
                deep: true
            },
            formInline: {
                handler(newValue, oldValue) {
                    if (newValue.chartType == "number") {
                        this.ruleInline.pitchIndicators[0] = {required: true, message: '请选择显示指标', trigger: 'change'}
                        this.isMultiple = false
                    } else if (newValue.chartType == "line" || newValue.chartType == "bar" || newValue.chartType == "table" || newValue.chartType == "funnel") {
                        this.isMultiple = true
                        this.ruleInline.pitchIndicators[0] = {
                            required: true,
                            message: '请选择显示指标',
                            trigger: 'change',
                            type: 'array'
                        }
                    }
                },
                deep: true
            },
        },

    }
</script>

<style  scoped>
    .hint {
        height: 34px;
        background-color: #FFFFFF;
        border: #FFFFFF
    }

    .tianchong {
        width: 100%;
        height: 33px;
    }

    .type {
        padding-left: 50px;
        font-size: 25px;
        color: #B5BDC9;
    }

    .charts {
        margin-bottom: 20px;
        display: flex;
    }

    .chart {
        width: 60px;
        height: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 20px;
        font-size: 16px;
        border-radius: 5px;
        border: 1px solid #C2CBD8;
        margin-top: 10px;
        justify-content: space-around;
    }

    .windows {
        margin-bottom: 20px;
        display: flex;
    }

    .window {
        width: 90px;
        height: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 20px;
        font-size: 16px;
        border-radius: 5px;
        border: 1px solid #C2CBD8;
        margin-top: 10px;
        justify-content: space-around;
    }

    .active {
        border: 1px solid #54BA52;
        color: #54BA52;
    }
</style>
